<template>
  <el-date-picker
    v-model="val"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    format="yyyy - MM - dd HH:mm:ss"
    value-format="timestamp"
    :default-time="['00:00:00', '23:59:59']"
    @change="dataChange"
  />
</template>
<script>
export default {
  name: 'HeaderSearch',
  props: {
    value: {
      type: Array,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      val: null
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        this.val = newVal
        console.log(`new: ${newVal}, old: ${oldVal}`)
      },
      deep: true
    }
  },
  methods: {
    dataChange(val) {
      console.log(val)
      if (val !== undefined && val !== null) {
        this.$emit('input', val)
      } else {
        this.$emit('input', [])
      }
    }
  }
}
</script>
